<template>
  <div id="home">
    <div id="Header">
      <div class="Header-box">
          <img src="../assets/img/山2.png" alt="" width="40px" height="60px"/>
          <a class="logo-box">ZhebianHerb</a>
          <a class="title">赭鞭识草</a>
          <img src="../assets/img/山1.png" alt="" width="40px" height="60px"/>
      </div>
      <div class="menu">
          <a href="/identify/image" class="part">识药台</a>
          <a href="/library" class="part">百草库</a>
          <a href="/Forum" class="part">悬壶坛</a>
          <a href="/news" class="part1">八卦堂</a>
      </div>
      <div class="full-image"></div>
    </div>
    <div id="body">
      <div class="shibie">
        <div class="title-box">
          <div class="text">识药台</div>
          <div class="fenge">一</div>
          <div class="English">Herbal Identification</div>
        </div>
        <div style="height:5px; background: linear-gradient(to bottom, #717171, #f7f7f7);"></div>
        <div class="playon">
          <div style="padding-top:20px;">
            <img src="@/assets/img/草药识别.png" alt="" width="600px" height="400px"/>
          </div>
          <div class="content">
            <h1 style="font-family:SimSun; color: #575656; font-size:52px; text-align: left;">草药识别</h1>
            <p><a href="/identify/image" style="text-decoration: none; color:#2b9e92;">进入体验&gt;</a></p>
            <p style="width:600px; font-family:SimSun; line-height:1.5; font-size:18px; padding-top:10px; text-align: left;">
              当你使用赭鞭识草的草药识别功能时，你可以通过打开系统内置的摄像头，将手机相机对准中草药或草药药材，您也可以使用上传图片的方式，系统将会自动解析并识别该植株，然后提供相关的信息和功能。草药识别的主要作用是方便用户获取中草药或草药产品的详细信息，包括但不限于以下内容：<br/>
              <a style="font-weight:bold; text-align: left;">草药名称和别名：</a>系统会显示该草药的正式名称以及可能的别名，帮助用户准确识别草药。<br/>
              <a style="font-weight:bold; text-align: left;">草药属性和功效：</a>系统会提供该草药的基本属性，如性味、归经等，并列出其主要功效和用途。
            </p>
          </div>
        </div>
      </div>
      <div class="baicao">
        <div class="title-box">
          <div class="text">百草库</div>
          <div class="fenge">一</div>
          <div class="English">Baicao Database</div>
        </div>
        <div class="baicao-playon">
          <div style="width: 50%;">
            <div class="first" @mouseenter="floatUp(7)" @mouseleave="floatDown(7)" :class="{ 'floating': isFloating[7] }">
              <div class="image">
                <img src="@/assets/img/中草药背景3.png" width="180px" height="120px">
              </div>
              <div class="dd">
                <a style="font-family:SimSun; color: #575656; padding-left:5px; font-size:30px; height: 35px; text-align: left;">所有内容</a>
                <a href="/library" style="text-decoration: none; color:#2b9e92; padding-left:5px; height: 10px; font-size: 14px; text-align: left;">查看详情&gt;</a>
                <p style="font-family:SimSun; line-height:1; font-size:18px; padding-left:5px; text-align: left;">百草库包含纲目分类和作用分类两大模块。纲目模块主要继承了传统的草药分类办法，具有科学性。功能分类只要根据草药功效进行分类，贴近用户日常生活，因此，更具实用性。</p>
              </div>
            </div>
            <div class="first" @mouseenter="floatUp(8)" @mouseleave="floatDown(8)" :class="{ 'floating': isFloating[8] }">
              <div class="image">
                <img src="@/assets/img/本草纲目.png" width="180px" height="120px">
              </div>
              <div class="dd">
                <a style="font-family:SimSun; color: #575656; padding-left:5px; font-size:30px; height: 40px; text-align: left;">纲目分类</a>
                <a style="text-decoration: none; color:#575656; padding-left:5px; font-weight:bold; height: 10px; text-align: left; font-family:SimSun;">————————·</a>
                <p style="font-family:SimSun; line-height:1; font-size:18px; padding-left:5px; text-align: left;">百草库借鉴本草纲目，将中草药按照它们的科属、类别和特征进行分类。这样的分类系统可以帮助用户更好地了解中草药的分类体系，方便用户在需要时查找和辨认特定的中草药。</p>
              </div>
            </div>
            <div class="first" @mouseenter="floatUp(9)" @mouseleave="floatDown(9)" :class="{ 'floating': isFloating[9] }">
              <div class="image">
                <img src="@/assets/img/药效.png" width="180px" height="120px">
              </div>
              <div class="dd">
                <a style="font-family:SimSun; color: #575656; padding-left:5px; font-size:30px; height: 40px; text-align: left;">功能分类</a>
                <a style="text-decoration: none; color:#575656; padding-left:5px; font-weight:bold; height: 10px; text-align: left; font-family:SimSun;">————————·</a>
                <p style="font-family:SimSun; line-height:1; font-size:18px; padding-left:5px; text-align: left;">百草库还根据中草药的功能特点，将中草药按照其功效和应用领域进行分类。这样的分类系统可以帮助用户了解中草药的主要功效和适用范围，方便用户在需要时选择合适的中草药。</p>
              </div>
            </div>
          </div>
          <div class="con" style="width: 50%;">
            <div class="second">
              中草药数据库
            </div>
            <div class="third">
              <img src="@/assets/img/神农架1.png" width="380px" height="600px"/>
            </div>
          </div>
        </div>
      </div>
      <div class="xuanhu">
        <div class="title-box">
          <div class="text">悬壶坛</div>
          <div class="fenge">一</div>
          <div class="English">Hanging Pot Forum</div>
        </div>
        <div class="xuanhu-body">
          <div class="body-left">
            <img src="@/assets/img/交流.png" width="500px" height="450px"/>
          </div>
          <div class="body-right">
            <div class="right-body"  @mouseenter="floatUp(4)" @mouseleave="floatDown(4)" :class="{ 'floating': isFloating[4] }">
              <img src="@/assets/img/交流互助.png" width="200px" height="120px"/>
              <div>
                <h2 style="font-size: 32px; color: #575656; text-align: left;">交流互助</h2>
                <p style="text-align: left;">悬壶坛是一个中草药爱好者们交流和分享的平台。用户可以在论坛上发布自己对中草药的认识、经验和观点，与其他用户进行讨论和交流。这样的功能可以帮助用户扩展知识，了解更多关于中草药的信息。</p>
              </div>
            </div>
            <div class="right-body"  @mouseenter="floatUp(5)" @mouseleave="floatDown(5)" :class="{ 'floating': isFloating[5] }">
              <div>
                <h2 style="font-size: 32px; color: #575656; text-align: left;">问题解答</h2>
                <p style="text-align: left;">悬壶坛也是一个解答中草药相关问题的地方。用户可以在论坛上提出自己遇到的问题，其他用户或专业人士可以给予解答和建议。这样的功能可以帮助用户解决疑惑，获得专业的意见和帮助。</p>
              </div>
              <img src="@/assets/img/问题解答.png" width="200px" height="120px"/>
            </div>
            <div class="right-body"  @mouseenter="floatUp(6)" @mouseleave="floatDown(6)" :class="{ 'floating': isFloating[6] }">
              <img src="@/assets/img/分享.png" width="200px" height="120px"/>
              <div>
                <h2 style="font-size: 32px; color: #575656; text-align: left;">资源分享</h2>
                <p style="text-align: left;">悬壶坛还是一个中草药资源分享的平台。用户可以在论坛上分享自己收集的中草药资料、书籍、研究成果等，让其他用户受益。这样的功能可以促进中草药知识的传播和共享。</p>
                <a href="/forum" style="width: 60px; height: 20px; text-decoration: none; color: #2b9e92;">更多&gt;&gt;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bagua">
        <div class="title-box">
          <div class="text">八卦堂</div>
          <div class="fenge">一</div>
          <div class="English">Gossip News</div>
        </div>
        <div class="bagua-body">
          <div class="body-top">
            <h1 style="font-size: 40px; color: #575656;">最新最全的消息就看八卦堂！</h1>
            <p style="font-size: 20px;">
              中医和西医在治疗模式上是有明显不同的。从西医来看，多数的化学药物都是单靶点的，而中医和中药更多是多靶点的。也就是说，中药更多的像个团队在作战。但是对于疾病来讲，疾病的发生发展过程，也有很多点可以干预的。
              <a href="/news" style="color: #2b9e92; text-decoration: none; font-weight: bold;">了解详情&gt;&gt;</a>
            </p>
          </div>
          <div class="body-bottom">
            <div class="bagua-div" :class="{ 'floating': isFloating[1] }" @mouseenter="floatUp(1)" @mouseleave="floatDown(1)">
              <h2>中草药新闻速递：</h2>
              <a style="font-weight: bold; color: #575656;">·——————————————·</a>
              <p style="line-height: 1.5;">这个功能会及时推送最新的中草药相关新闻给用户。你可以了解到中草药领域的最新研究成果、草药应用的新发现等等。同时，为了增加趣味性，系统还会加入一些有趣的中草药小故事和趣闻，让你在阅读新闻的同时也能轻松一笑。</p>
            </div>
            <div class="bagua-div" @mouseenter="floatUp(2)" @mouseleave="floatDown(2)" :class="{ 'floating': isFloating[2] }">
              <h2>中草药娱乐生活：</h2>
              <a style="font-weight: bold; color: #575656;">·——————————————·</a>
              <p style="line-height: 1.5;">这个功能会给你带来一些中草药界的八卦和热门话题。你可以了解到中草药界的一些趣事、明星中草药师的动态等等。当然，这些八卦爆料都是经过筛选和验证的，确保信息的可靠性。</p>
            </div>
            <div class="bagua-div" @mouseenter="floatUp(3)" @mouseleave="floatDown(3)" :class="{ 'floating': isFloating[3] }">
              <h2>中草药文化传承：</h2>
              <a style="font-weight: bold; color: #575656;">·——————————————·</a>
              <p style="line-height: 1.5;">这个功能会定期推送一些关于中草药文化的内容。你可以了解到中草药的历史渊源、传统鉴别方法、中草药与中医理论的关系等等。这些内容会以趣味性的方式呈现，让你在学习中草药知识的同时也能感受到中草药文化的魅力。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="aboutus">
      <AboutUs></AboutUs>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
    <!--回到顶部-->
    <el-backtop
        :right="18"
        :bottom="60"
        style="background-color: rgba(0, 0, 0, 0.2);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 20px;
        color: #91cec9;">
    </el-backtop>
  </div>
</template>

<script setup>
import AboutUs from '@/components/AboutUs.vue';
import Footer from '@/components/Footer.vue';
</script>

<script>
export default {
  data() {
    return {
      isFloating: {
        1: false,
        2: false,
        3: false
      }
    };
  },
  methods: {
    floatUp(id) {
      this.isFloating[id] = true; // 鼠标移入时添加漂浮效果
    },
    floatDown(id) {
      this.isFloating[id] = false; // 鼠标移开时取消漂浮效果
    }
  }
};
</script>


<style scoped>
#home {
  margin: 0;
  padding: 0;
}

#Header {
    /* background-color: #549b9d; */
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 设置页面阴影 */
    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

.Header-box {
    /* background-color: #549b9d; */
    z-index: 10;
    background-color: #fff;
    color: #e7dddd;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置页面阴影 */
    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

.Header-box img, .logo-box, .title {
  margin: 0 10px; /* 可以调整标签之间的间距 */
}

.logo-box {
    width: 120px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-weight: bold;
    font-family: SimSun;
    /* color: #F5D3B8; */
    /* color: #b5c2a6; */
    color: #5ba58a;
    padding: 0;
}

.title {
    z-index: 2;
    line-height: 60px;
    text-align: center;
    font-family: SimSun;
    font-weight: bold;
    font-size: 28px;
    color: #717171;
    padding: 0;
}

.menu {
    z-index: 10;
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置页面阴影 */
    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
    border-top: solid 2.5px #717171;
    border-bottom: solid 2.5px #717171;
}

.part {
    margin-right: 50px;
    font-family: SimSun;
    font-size: 20px;
    color: #717171;
    text-decoration: none;
}

.part1 {
    font-family: SimSun;
    font-size: 20px;
    color: #717171;
    text-decoration: none;
}

.full-image {
  z-index: 10;
  width: 100%;
  height: 800px;
  background-image: url('@/assets/img/中草药识别1.png');
  background-size: cover;
  background-position: center;
}

.body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.content {
  text-align: left;
}

.shibie .title-box {
  height: 80px;
  /* background-color: #e8f6e9; */
  background-color: #717171;
}

.baicao .title-box {
  height: 80px;
  /* background-color: #e8f6e9; */
  background-color: #f7f7f7;
}

.xuanhu .title-box {
  height: 80px;
  /* background-color: #2b9e92; */
  background-color: #5ba58a;
}

.bagua .title-box {
  height: 80px;
  /* background-color: #e8f6e9; */
  background-color: #71717169;
}

.text {
  height: 35px;
  padding-top: 10px;
  text-align: center;
  font-family: SimSun;
  font-size: 26px;
  font-weight: bold;
  /* color: #717171; */
  color: #fff;
}

.fenge {
  height: 15px;
  text-align: center;
  padding-top: 5px;
  /* color: #575656; */
  color: #fff;
}

.English {
  text-align: center;
  padding-top: 5px;
  font-size: 18px;
  /* color: #717171; */
  color: #fff;
}

.playon {
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #f9eee5; */
  background-color: #f7f7f7;
}

.playon img {
  margin-right: 10px;
}

.baicao .text {
  height: 35px;
  padding-top: 10px;
  text-align: center;
  font-family: SimSun;
  font-size: 26px;
  font-weight: bold;
  color: #717171;
}

.baicao .fenge {
  height: 15px;
  text-align: center;
  padding-top: 5px;
  color: #575656;
}

.baicao .English {
  text-align: center;
  padding-top: 5px;
  font-size: 18px;
  color: #717171;
}

.baicao-playon {
  width: 100%;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
}

.first {
  margin-left: 80px;
  margin-top: 40px;
  width: 90%;
  height: 150px;
  display: flex;
  justify-content: baseline;
  border-bottom: solid 3px #5ba58a;
  transition: all 0.8s;
  cursor: pointer; /* 鼠标指针样式设为手型 */
}

.image {
  width: 100%;
  height: 140px;
  text-align: center;
  padding-top: 8px;
}

.dd {
  display: flex;
  flex-direction: column;
  align-items: left; /* 或者其他值，根据需要调整 */
}

.floating {
  transform: translateY(-20px);
  box-shadow: 0 2px rgba(0, 0, 0, 0.3);
}

.con {
  display: flex;
  align-items: center;
  margin-left: 60px;
}

.second {
  width: 140px;
  height: 660px;
  display: flex;
  /* background-color: #717171; */
  background-color: #5ba58a;
  color: #fff;
  font-family: SimSun;
  font-size: 54px;
  text-align: center;
  align-items: center;
  padding: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.xuanhu-body {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5ba58a;
}

.body-left {
  width: 45%;
  height: 500px;
  padding-left: 30px;
}

.body-right {
  width: 45%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin-left: 10px;
}

.right-body {
  width: 300px;
  height: 380px;
  margin-left: 5px;
  background-color: #e8f6e9;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 3px;
  font-family: SimSun;
  font-weight: bold;
  transition: all 0.6s;
  cursor: pointer; /* 鼠标指针样式设为手型 */
}

.bagua {
  width: 100%;
  height: 680px;
  background-image: url('@/assets/img/神农架.png');
  background-size: cover;
  background-position: center;
}

.bagua-body {
  width: 100%;
  height: 600px;
  background-color: #ffffff60;
}

.body-top {
  width: 100%;
  height: 250px;
  padding: 30px 90px 90px 90px;
  font-family: SimSun;
}

.body-bottom {
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: center;
}

.bagua-div {
  width: 300px;
  height: 320px;
  background-color: #2b9e92;
  margin: 10px 30px 30px 30px;
  padding: 10px;
  border-radius: 4px;
  color: #fff;
  font-family: SimSun;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.7s;
  cursor: pointer; /* 鼠标指针样式设为手型 */
}

.footer {
  margin: 0;
  padding: 0;
}
</style>

